<template>
  <div>
    <img v-for="pic in fieldValue" :key="pic" :src="pic" :alt="fileName(pic)" class="img mr-1 mb-1" @click="showImg">
  </div>
</template>

<script>
import URL from 'url'
export default {
  name: 'Picture',
  props: {
    fieldValue: {
      type: Array,
      required: false,
      default: () => {
        return [];
      }
    }
  },
  methods: {
    fileName(url) {
      let path = URL.parse(url).path;
      return path.substring(path.lastIndexOf('/') + 1, path.indexOf('?'));
    },
    showImg(e) {
      window.open(e.currentTarget.src).location;
    }
  }
}
</script>

<style scoped>
.img {
  cursor: pointer;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 180px;
  border: solid 1px #f5f5f5;
  border-radius: 4px;
  padding: 4px;
}

.img:hover {
  box-shadow: 1px 1px 0 #d9d9d9;
}
</style>